<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<head>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="keywords" content="HTML5 Template" />
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Doozy | Responsive Ecommerce Portfolio Theme</title>

    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Favicon -->
    <link rel="shortcut icon" href="/favicon.ico">

    <!-- Google Webfont -->
    <link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

    <!-- CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="js/vendor/slick/slick.css">
    <link rel="stylesheet" href="css/prettyphoto.css">
    <link rel="stylesheet" href="js/vendor/owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="js/vendor/owl-carousel/owl.theme.css">
    <link rel="stylesheet" href="js/vendor/owl-carousel/owl.transitions.css">
    <link rel="stylesheet" href="js/vendor/flex-slider/flexslider.css">
    <link rel="stylesheet" href="js/vendor/rsplugin/rs-plugin/css/settings.css" media="screen"/>
    <link rel="stylesheet" href="js/vendor/remodal/jquery.remodal.css">
    <link rel="stylesheet" href="js/vendor/flex-slider/flexslider.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">

</head>
<body>

<div class="body">
    <!-- HEADER -->
    <div class="topbar2-main">
        <div class="container">
            <div class="topbar2">
                <div class="row">
                    <div class="col-md-12">
                        <ul>
                            <li>
                                <div class='selectBox'>
                                    <a id="myAccount" href="#">我的账户</a>
                                </div>
                            </li>
                            <c:choose>
                                <c:when test="${empty sessionScope.client}">
                                    <li>
                                        <p>游客您好，您可以在此<a href="login.html">登录</a>或<a href="signup.html">注册</a>.</p>
                                    </li>
                                </c:when>
                                <c:otherwise>
                                    <li>
                                        <p>${sessionScope.client.name}您好，欢迎来到duangbs！</p>
                                    </li>
                                </c:otherwise>
                            </c:choose>
                        </ul>
                        <div class="t2-cart">
                            <div class="cart-main">
                                <i class="fa fa-shopping-cart shop-cart2-i"></i>
                                <span><a class="shop-cart2"><span class="totalCount">${sessionScope.cart.total}</span> 个物品</a></span>
                                <div id="cart-main">
                                    <ul>
                                        <c:choose>
                                            <c:when test="${empty sessionScope.cart}">
                                            </c:when>
                                            <c:otherwise>
                                                <c:forEach var="cartLine" items="${sessionScope.cartLines}">
                                                    <li>
                                                        <img src="${cartLine.book.imgUrl}" alt="" />
                                                        <div class="description">
                                                            <div style="display: none" class="carlineId">${cartLine.id}</div>
                                                            <div class="closeit" onclick="removeFromCart(this)">X</div>
                                                            <a href="./product_single.html">${cartLine.book.name}</a>
                                                            <div class="position"><p><span class="currency">￥</span><span class="bookPrice">${cartLine.book.price}</span><span class="sign">x</span><input type="text" value="${cartLine.quanlity}" /></p></div>
                                                        </div>
                                                        <div class="clearfix"></div>
                                                    </li>
                                                </c:forEach>
                                            </c:otherwise>
                                        </c:choose>
                                    </ul>
                                    <div class="bottom">
                                        <span>Total: ￥<span class="total">${sessionScope.cart.totalPrice}</span></span>
                                        <div class="clearfix"></div>
                                        <a href="/orderCommit" >付款 <i class="fa fa-angle-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="t2-search">
                            <form>
                                <input type="text" placeholder="搜索商品">
                                <button type="submit"><i class="fa fa-search"></i></button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="header header3">
        <header>
            <div class="container">
                <div class="row">
                    <div class="col-md-12 logo">
                        <a href="#"><img src="images/logo.png" class="img-responsive img-centered" alt=""/></a>
                    </div>
                </div>
            </div>
        </header>

        <!-- NAVMENU -->
        <nav class="container">
            <div class="nav-main">
                <div id='navmenu'>
                    <ul>
                        <li><a href='./index1.jsp'>首页</a></li>
                        <li><a href='./index1.jsp'>商城</a></li>
                        <li class='has-sub'>
                            <a href='#'>团队</a>
                            <ul>
                                <li><a href='./team.html'>队伍</a></li>
                                <li><a href='./team_member.html'>成员</a></li>
                            </ul>
                        </li>
                        <li><a href='./contact.html'>联系我们</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <div id="slider" class="slider">
        <!-- FULLSCREEN SLIDER -->
        <div class="tp-banner-container">
            <div class="tp-banner" >
                <ul>
                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on"  data-title="Intro Slide">
                        <img src="images/dummy.png"  alt="slidebg1" data-lazyload="images/slider/1/1.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
                        <div class="tp-caption lfr tp-resizeme rs-parallaxlevel-10"
                             data-x="752"
                             data-y="180"
                             data-speed="700"
                             data-start="800"
                             data-easing="Power3.easeInOut"
                             data-splitin="none"
                             data-splitout="none"
                             data-elementdelay="0.1"
                             data-endelementdelay="0.1"
                             data-endspeed="300"
                             style="
							z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;	font-size: 70px; font-weight: 400; color: #464545;
							font-family:Courgette;
							letter-spacing:-0.04em;
							">
                            当 前  <span style="color:#ff5969;">热 卖</span>
                        </div>
                        <div class="tp-caption lfr tp-resizeme rs-parallaxlevel-10"
                             data-x="835"
                             data-y="260"
                             data-speed="700"
                             data-start="1200"
                             data-easing="Power3.easeInOut"
                             data-splitin="none"
                             data-splitout="none"
                             data-elementdelay="0.1"
                             data-endelementdelay="0.1"
                             data-endspeed="300"
                             style="
							z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;	font-size: 70px; font-weight: 400; color: #464545;
							font-family:Courgette;
							letter-spacing:-0.04em;
							">
                            点击查看详情
                        </div>
                        <div class="tp-caption customin tp-resizeme rs-parallaxlevel-0"
                             data-x="960"
                             data-y="360"
                             data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                             data-speed="500"
                             data-start="1700"
                             data-easing="Power3.easeInOut"
                             data-splitin="none"
                             data-splitout="none"
                             data-elementdelay="0.05"
                             data-endelementdelay="0.1"
                             style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">
                            <a href="#" class="btn-s2" style="color:#fff;">开 始 购 买</a>
                        </div>
                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on"  data-title="Intro Slide">
                        <img src="images/dummy.png"  alt="slidebg1" data-lazyload="images/slider/1/2.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
                        <div class="tp-caption lfr tp-resizeme rs-parallaxlevel-10"
                             data-x="600"
                             data-y="180"
                             data-speed="700"
                             data-start="800"
                             data-easing="Power3.easeInOut"
                             data-splitin="none"
                             data-splitout="none"
                             data-elementdelay="0.1"
                             data-endelementdelay="0.1"
                             data-endspeed="300"
                             style="
							z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;	font-size: 70px; font-weight: 400; color: #464545;
							font-family:Courgette;
							letter-spacing:-0.04em;
							">
                            当 前  <span style="color:#ff5969;">热 卖</span>
                        </div>
                        <div class="tp-caption lfr tp-resizeme rs-parallaxlevel-10"
                             data-x="750"
                             data-y="260"
                             data-speed="700"
                             data-start="1200"
                             data-easing="Power3.easeInOut"
                             data-splitin="none"
                             data-splitout="none"
                             data-elementdelay="0.1"
                             data-endelementdelay="0.1"
                             data-endspeed="300"
                             style="
							z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;	font-size: 70px; font-weight: 400; color: #464545;
							font-family:Courgette;
							letter-spacing:-0.04em;
							">
                            点击查看详情
                        </div>
                        <div class="tp-caption customin tp-resizeme rs-parallaxlevel-0"
                             data-x="960"
                             data-y="360"
                             data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                             data-speed="500"
                             data-start="1700"
                             data-easing="Power3.easeInOut"
                             data-splitin="none"
                             data-splitout="none"
                             data-elementdelay="0.05"
                             data-endelementdelay="0.1"
                             style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">
                            <a href="#" class="btn-s2" style="color:#fff;">开 始 购 买</a>
                        </div>
                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on"  data-title="Intro Slide">
                        <img src="images/dummy.png"  alt="slidebg1" data-lazyload="images/slider/1/3.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
                        <div class="tp-caption lfr tp-resizeme rs-parallaxlevel-10"
                             data-x="800"
                             data-y="180"
                             data-speed="700"
                             data-start="800"
                             data-easing="Power3.easeInOut"
                             data-splitin="none"
                             data-splitout="none"
                             data-elementdelay="0.1"
                             data-endelementdelay="0.1"
                             data-endspeed="300"
                             style="
							z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;	font-size: 70px; font-weight: 400; color: #464545;
							font-family:Courgette;
							letter-spacing:-0.04em;
							">
                            当 前  <span style="color:#ff5969;">热 卖</span>
                        </div>
                        <div class="tp-caption lfr tp-resizeme rs-parallaxlevel-10"
                             data-x="860"
                             data-y="260"
                             data-speed="700"
                             data-start="1200"
                             data-easing="Power3.easeInOut"
                             data-splitin="none"
                             data-splitout="none"
                             data-elementdelay="0.1"
                             data-endelementdelay="0.1"
                             data-endspeed="300"
                             style="
							z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;	font-size: 70px; font-weight: 400; color: #464545;
							font-family:Courgette;
							letter-spacing:-0.04em;
							">
                            点击查看详情
                        </div>
                        <div class="tp-caption customin tp-resizeme rs-parallaxlevel-0"
                             data-x="960"
                             data-y="360"
                             data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                             data-speed="500"
                             data-start="1700"
                             data-easing="Power3.easeInOut"
                             data-splitin="none"
                             data-splitout="none"
                             data-elementdelay="0.05"
                             data-endelementdelay="0.1"
                             style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">
                            <a href="#" class="btn-s2" style="color:#fff;">开 始 购 买</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <div class="space15"></div>

    <div class="container main-shop-content">

        <!-- WELCOME -->
        <div class="home-welcome">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h4><span>欢迎</span></h4>
                        <p>Duang Book Store提供包括艺术、儿童、教育、社会四大类书籍，每大类中含有众多书籍，在这里，您可以尽情浏览，点击书本的quick view按钮可以查看其详细信息。并且，本书店价格实惠，童叟无欺，提供完善的物流与后续保障服务，您完全可以放心购买。如果感兴趣，您可以将书本添加至购物车中。现在，就让我们开始愉快地购物吧</p>
                        <a href="javascript:return false;" class="btn-s2">开始购物</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="clearfix space70"></div>

        <!-- SHOP CONTENT -->
        <div class="shop-featured">
            <div class="container">
                <c:forEach items="${applicationScope.bookList}" var="books">
                    <div class="row">
                        <div class="col-md-12">
                            <h5><span>${books[0].type}</span></h5>
                            <div class="shop-slider1">
                                <c:forEach var="book" items="${books}">
                                    <div class="col-md-4">
                                        <div class="product-info">
                                            <div class="product-thumb">
                                                <img src="${book.imgUrl}" class="img-responsive" alt=""/>
                                                <a class="aIndex" data-remodal-target="modal">Quick View</a>
                                            </div>
                                            <div class="product-price">￥${book.price}</div>
                                            <h4><a href="./product_single.html">${book.name}</a></h4>
                                            <h4 style="display: none">${book.author}</h4>
                                            <h4 style="display: none">${book.press}</h4>
                                            <h4 style="display: none">${book.publication}</h4>
                                            <h4 style="display: none" class="bookId">${book.id}</h4>
                                            <div><a href="#" class="shop-btn shop-btn2" onclick="addToCart1(this)"><i class="fa fa-shopping-cart"></i> 添加到购物车</a></div>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix space70"></div>
                </c:forEach>
            </div>
        </div>
    </div>

    <div class="clearfix space60"></div>
    <div class="clearfix "></div>
    
</div>

<!-- SHOP QUICKVIEW MODAL - DEMO -->
<div class="remodal" data-remodal-id="modal">
    <div class="row product-single">
        <div class="col-md-7">
            <div id="product-single" class="flexslider">
                <ul class="slides">
                    <li><img src="statics/img/book/art/art_book1.jpg" alt=""/></li>
                </ul>
            </div>
        </div>

        <div class="col-md-5">
            <div class="ps-inner">
                <h4>Keds Adelle Girls Toddler Shoes</h4>
                <span class="ratings ps-ratings">
				<span class="star">
				<a href="#" class="yes fa fa-star"></a>
				<a href="#" class="yes fa fa-star"></a>
				<a href="#" class="yes fa fa-star"></a>
				<a href="#" class="yes fa fa-star"></a>
				<a href="#" class="no fa fa-star"></a>
				</span>
				<em><a href="#">3 评论</a></em>
				</span>
                <div class="product-price">￥31.99</div>
                <div class="ps-size">
                    <h6>作者: <span>123</span></h6>
                </div>
                <div class="ps-size">
                    <h6>出版社: <span>123</span></h6>
                </div>
                <div class="ps-size">
                    <h6>出版时间: <span>123</span></h6>
                </div>
                <div class="ps-size" style="display:none;">
                    <h6>id: <span class="bookId">123</span></h6>
                </div>

                <div class="clearfix"></div>
                <div class="ps-quantity">
                    <h6>数量:</h6>
                    <div class="quantity">
                        <input type="text" name="qty" id="qty" maxlength="12" value="1" class="input-text qty" />
                    </div>
                </div>
                <div class="ps-btn">
                    <a href="#" class="addcart" onclick="addToCart2(this)"><i class="fa fa-shopping-cart"></i>添加到购物车</a>
                    <a href="#" class="addwishlist"><i class="fa fa-heart"></i>添加到愿望单</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vendor/slick/slick.js"></script>
<script src="js/vendor/isotope/isotope.pkgd.js"></script>
<script src="js/vendor/owl-carousel/owl.carousel.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/jquery.inview.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/vendor/flex-slider/jquery.flexslider.js"></script>
<script src="js/vendor/flex-slider/main.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script src="js/jquery.prettyphoto.js"></script>
<script src="js/vendor/rsplugin/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script src="js/vendor/rsplugin/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script src="js/vendor/rsplugin/main.js"></script>
<script src="js/vendor/remodal/jquery.remodal.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
    $(function() {
        //处理点击我的账户链接
        myAccountClick();

    });

    //处理点击我的账户链接
    function myAccountClick() {
        var $myAccount = $("#myAccount");
        $myAccount.click(function () {
            var client = "${sessionScope.client}";
            if(""==client) {
                this.innerHTML = "请先登录";
            }
            else {
                window.location.href="myaccount.jsp";
            }
        })
    }
    
    function addToCart1(a) {
        var bookId = parseInt(a.parentNode.parentNode.getElementsByClassName("bookId")[0].innerHTML);
        $.ajax({
            url: "/addCart",
            method: "post",
            data: "{\"bookId\":"+bookId+"}",
            dataType: "json",
            success: function(data) {
                var judge = false, index = 0;
                //todo
                if(judge) {

                }
                else {
                    var $div = $("#cart-main ul:first");
                    $div.append("<li>\n" +
                        "<img src="+data.imgUrl+" alt=\"\" />\n" +
                        "<div class=\"description\">\n" +
                        "<div class=\"closeit\" onclick=\"removeFromCart(this)\">X</div>\n" +
                        "<a href=\"./product_single.html\">"+data.name+"</a>\n" +
                        "<div class=\"position\"><p><span class=\"currency\"><span>￥</span>"+data.price+"</span><span class=\"sign\">x</span><input type=\"text\" value=\"1\" /></p></div>\n" +
                        "</div>\n" +
                        "<div class=\"clearfix\"></div>\n" +
                        "</li>");
                }
                var count = $(".totalCount")[0];
                count.innerHTML = parseInt(count.innerHTML) + 1;
                var total = $(".total")[0];
                total.innerHTML = parseFloat(total.innerHTML) + data.price;
            }
        });
    }

    
    function addToCart2(a) {
        alert(123);
    }

    function removeFromCart(a) {
        var cartlineId = a.parentNode.children[0].innerHTML;
        $.ajax({
            url: "cutCart",
            data: "{\"cartlineId\":"+cartlineId+"}",
            method: "post",
            success: function() {
                //a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
                //更新物品数量
                var bookQuantity = parseInt(a.parentNode.getElementsByTagName("input")[0].value);
                var count = $(".totalCount")[0];
                count.innerHTML = parseInt(count.innerHTML) - bookQuantity;
                //更新总价格
                var bookPrice = parseFloat(a.parentNode.getElementsByClassName("bookPrice")[0].innerHTML);
                var total = $(".total")[0];
                total.innerHTML = parseFloat(total.innerHTML) - bookPrice * bookQuantity;
            }
        })
    }
    <%--function payBill() {--%>
        <%--var $pay = $("#payBill");--%>
        <%--//var cartLine = ${sessionScope.cartLines};--%>
        <%--$pay.click(function () {--%>
            <%--$.ajax({--%>
                <%--url:"orderCommit",--%>
                <%--//data:"{\"cartLines\":"+cartLine+"}",--%>
                <%--method:"post"--%>
            <%--})--%>
        <%--})--%>
    <%--}--%>

</script>

</body>
</html>
